<template>
	<view class="page">
		<u-sticky>
			<hedsty :headCentext="'进阶'"></hedsty>
		</u-sticky>
		<view class="swiper_box">
			<!-- #ifndef MP-ALIPAY -->
			<swiper class="swiper" :current="current" :previous-margin="'150rpx'" :next-margin="'150rpx'"
				:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
				:circular="true" @change="swiperChange">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<image class='le-img' :src="item.goods_image" :class="{ 'le-active': current == index }"
						mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<swiper class="swiper1" :current="current" :indicator-dots="indicatorDots" :autoplay="autoplay"
				:interval="interval" :duration="duration" :circular="true" @change="swiperChange">
				<swiper-item class="swiper-item1" v-for="(item, index) in swiperList" :key="index">
					<image :src="item.goods_image" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
			<!-- #endif -->
			<view class="dange_prize_box">价格：{{ swiperList[current].recovery_price }}</view>
			<view class="dange_zopngjiprize_box">已进阶{{ swiperList[current].residue_num }}
			</view>


		</view>
		<view class="center_box">
			<view class="text_box">
				<view class="left_box">进阶程度</view>
				<view class="left_box">已选({{ selBonusPrice }})</view>
				<view class="le_box">{{ (percentage * 1) > 100 ? '100' : percentage }}%</view>
			</view>
			<view class="jinjie_jindu_box">
				<u-line-progress :percentage="percentage" :showText="false" inactiveColor="rgba(255, 255, 255, 0.78)"
					activeColor="rgba(255, 68, 68, 1)"></u-line-progress>
			</view>
		</view>
		<view class="center_box">
			<view class="text_box">
				<view class="left_box">进阶数量</view>
				<view class="left_box"></view>
				<view class="le_box">x{{slidervalue}}</view>
			</view>
			<view class="jinjie_jindu_box">
				<u-slider blockColor="rgba(255, 68, 68, 1)" activeColor="rgba(255, 68, 68, 1)"
					inactiveColor="rgba(255, 255, 255, 0.78)" blockSize="28" v-model="slidervalue" @input="sliderInput"
					min="0" max="50"></u-slider>

			</view>
		</view>

		<view class="neirong_box">
			<view class="biaoti_box">进阶材料
				<view class="rightqunauxna_box" @click="allselBonus">{{ !allFlag ? '全选' : '取消全选' }}</view>
			</view>
			<z-paging ref="paging" v-model="fipList" :fixed="false" @query="queryList" :refresher-enabled="false">
				<view class="zs_con_box">
					<view class="big_con_box" v-for="(item, index) in fipList" :key="index" @click="bonusBtn(item)">
						<view class="dange_box"
							:style="{ backgroundImage: item.type == 1 ? 'url(https://morgan.dingxians.cn/static/uniPic/0' + item.level_id + '.png)' : 'url(https://morgan.dingxians.cn/static/yfs/10.png)' }">
							<view class="dengji_box" v-if="item.type != 1" :class="'dengji_box_' + item.level_id">{{
                                item.level_name }}</view>
							<view class="dengji_box1" v-else :class="'dengji_box1_' + item.level_id">{{ item.level_name
                                }}
							</view>
							<view class="yuan_box">
								<image src="https://morgan.dingxians.cn/static/fuyuri/18.png" mode="scaleToFill"
									v-if="!item.flag" />
								<image src="https://morgan.dingxians.cn/static/bonus/9.png" mode="scaleToFill" v-else />
							</view>
							<view class="image_box">
								<image :src="item.box_prize_image" mode="heightFix" />
							</view>
							<view class="yuansu_box">{{ item.recovery_price }}元素</view>
						</view>
						<view class="name_box"> {{ item.box_prize_name }}</view>
						<view class="bujinqi_box">
							<u-number-box v-model="item.setpValue" :max="item.num">
								<view slot="minus" class="minus"
									style="background-image: url('https://morgan.dingxians.cn/static/bonus/7.png');">
								</view>
								<text slot="input" style="width: 50rpx;text-align: center;" class="input">{{
                                    item.setpValue
                                    }}</text>
								<view slot="plus" class="plus"
									style="background-image: url('https://morgan.dingxians.cn/static/bonus/8.png');">
								</view>
							</u-number-box>
						</view>
					</view>
					<view class="s" style="width: 160rpx;" v-for="i in 3"></view>
				</view>
			</z-paging>
		</view>

		<view class="zengsongbtn" @click="$no(jinjie1)"
			style="background-image: url('https://morgan.dingxians.cn/static/bonusgive/2.png');">确认进阶
		</view>
		<frawResultbx :prizeList="prizeData" :drawResultShow="drawResultShow" @gotoin="gotoin" @accept="accept">
		</frawResultbx>
	</view>
</template>
<script>
	import hedsty from '../components/hedsty.vue'
	import frawResultbx from '../components/frawResultbx.vue'
	export default {
		components: {
			hedsty,
			frawResultbx
		},
		data() {
			return {
				slidervalue: 1,
				prizeData: [],
				drawResultShow: false,
				swiperList: [],
				swiper: {
					margin: "150rpx",
					index: 0,
					list: []
				},
				fipList: [],
				noClick: true, //防抖
				allFlag: false, //是否全选
				xuazede: {},
				current: '',
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				duration: 500,
				current1: ''
			}
		},
		computed: {
			// 选中的商品id
			selectBonusId() {
				return this.fipList.filter(item => {
					return item.flag == true
				}).map(item => {
					return item.id + ':' + item.setpValue
				})
			},
			// 选中的商品list用于creat页展示、获取id
			// createList() {
			//     let housArr = [];
			//     this.$store.state.canadvList.filter(item => {
			//         return item.flag == true
			//     }).forEach((item) => {
			//         housArr.push(item)
			//     })
			//     return housArr;
			// },
			// 选中的商品总兑换价
			selBonusPrice() {
				var total = 0;
				this.fipList.filter(item => {
					return item.flag == true
				}).forEach((item) => {
					total += (item.price * item.setpValue)
				})
				return total.toFixed(2);
			},
			// 选中的商品总数
			// slidervalue() {
			//     let total_num = 1;
			//     this.fipList.filter(item => {
			//         return item.flag == true
			//     }).forEach((item) => {
			//         total_num =   item.price  /  this.xuazede.price
			//     })
			//     return total_num;
			// },
			// 可兑换赏品的总数
			selbonusNum() {
				let total_num = 0;
				this.fipList.filter(item => {
					return item.flag == true
				}).forEach((item) => {
					total_num += item.setpValue
				})
				return total_num;
			},
			// 选中的商品list用于creat页展示、获取id
			selHouObj() {
				let housArr = [];
				this.fipList.filter(item => {
					return item.flag == true
				}).forEach((item) => {
					housArr.push(item)
				})
				return housArr;
			},
			// 选中的商品总兑换价
			selBonusPrice() {
				var total = 0;
				this.fipList.filter(item => {
					return item.flag == true
				}).forEach((item) => {
					total += (item.price * item.setpValue)
				})
				return total.toFixed(2);
			},
			// 进度条百分比
			percentage() {
				var num = 0
				this.fipList.filter(item => {
					return item.flag == true
				}).forEach(item => {
					num += ((item.price * item.setpValue) / (this.xuazede.price * 1)) * 100
				})
				return num.toFixed(2)
			}
		},
		onLoad(e) {
			this.xuazede = JSON.parse(e.item)
			this.current1 = e.index
			console.log(this.xuazede, this.current)
		},
		onShow() {
			this.getData()
		},
		methods: {
			sliderInput(e) {
				this.slidervalue = e
			},
			getData() {
				this.$Request.get(this.$api.bonus.fusionPrizes).then(res => {
					if (res.code == 200) {
						this.swiperList = res.data.data
						this.current = this.current1
					}
				})
			},

			queryList(pageNo, pageSize) {
				let data = {
					status: 1,
					page: pageNo,
					limit: pageSize,
				}
				this.$Request.get(this.$api.bonus.boxOrderPrizes, data).then(res => {
					if (res.code == 200) {
						res.data.data.forEach((item) => {
							item.flag = false
							item.setpValue = item.num
							this.$store.state.canadvList.forEach((val) => {
								if (item.id == val.id) {
									item.flag = true
								}
							})
						});
						this.$refs.paging.complete(res.data.data)
					}
				})
			},
			swiperChange(e) {
				this.current = e.detail.current;
				// this.xuazede.price = this.swiperList[e.detail.current].price
				this.xuazede = this.swiperList[e.detail.current]

				console.log(this.current, this.xuazede.price)
			},
			jinjie1() {
				this.$showLoad()
				let data = {
					prize_id: this.xuazede.id,
					params: this.selectBonusId.join(','),
					num: this.slidervalue
				}
				this.$Request.post(this.$api.bonus.advancePrizesStore, data).then(res => {
					uni.hideLoading({})
					if (res.code == 200) {
						this.$msg(res.msg)
						setTimeout(() => {
							console.log(this.xuazede)
							this.prizeData = [{
								box_prize_name: this.xuazede.goods_name,
								price: this.xuazede.price,
								level_name: this.xuazede.level.name,
								box_prize_image: this.xuazede.goods_image,
								box_prize_level: this.xuazede.level_id,
								num: res.data
							}]
							this.drawResultShow = true
							this.$refs.paging.reload()
							this.getData()
						}, 500)
					} else {
						this.$msg(res.msg)
					}
				})
			},
			// 选择赏袋赏品
			bonusBtn(item) {
				item.flag = !item.flag
				console.log(this.selbonusNum, '需要操作的赏品总数')
				console.log(this.selBonusPrice, '需要操作的赏品总兑换价格')
				console.log(this.selHouObj, '需要操作的赏品列表')
			},
			//确认选择
			enter() {
				this.$store.state.canadvList = this.selHouObj
				this.$goBack()
			},
			allselBonus() {
				this.allFlag = !this.allFlag
				this.fipList.forEach(item => {
					if (this.allFlag) {
						item.flag = true
					} else {
						item.flag = false
					}
				})
			},
			accept() {
				this.drawResultShow = false
			}
		}
	}
</script>
<style lang="scss" scoped>
	/deep/.zp-scroll-view-absolute {
		background-color: transparent !important;
		background-image: none !important;
	}

	.page {
		width: 100vw;
		min-height: 100vh;
		background-image: url('https://morgan.dingxians.cn/static/qjbg.gif');
		background-size: 100% 100%;
		box-sizing: border-box;
		padding-bottom: 100rpx;

		.swiper_box {
			width: 100%;
			height: 476rpx;
			box-sizing: border-box;
			padding: 0 69rpx;
			margin: auto;
			margin-bottom: 39rpx;

			.swiper {
				height: 399rpx;
				margin: 0 20rpx;

				.le-img {
					width: 100%;
					height: 399rpx;
					display: block;
					transform: scale(.8);
					transition: transform 0.3s ease-in-out 0s;
					background-image: url('https://morgan.dingxians.cn/upload/20241028/671f3e876fe79.png');
					background-size: 100% 100%;
					border-radius: 4px;

					&.le-active {
						transform: scale(1);
					}
				}


				.housing_box {
					width: 100%;
					height: 31rpx;
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 31rpx;
				}

			}

			.swiper1 {
				width: 300rpx;
				height: 300rpx;
				margin: auto;
			}

			.swiper-item1 {
				display: block;
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.dange_prize_box {
				width: 100%;
				height: 31rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #EED6C7;
				line-height: 31rpx;
				text-align: center;
				margin-bottom: 28rpx;
			}

			.dange_zopngjiprize_box {
				width: 100%;
				height: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #EED6C7;
				line-height: 28rpx;
				text-align: center;
				margin-bottom: 37rpx;
			}
		}

		.center_box {
			width: 672rpx;
			margin: auto;
			margin-bottom: 56rpx;

			.text_box {
				height: 40rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 20rpx;
				margin-bottom: 12rpx;
			}

			.jinjie_jindu_box {
				width: 672rpx;
				height: 24rpx;
			}
		}

		.neirong_box {
			width: 708rpx;
			height: 686rpx;
			background-image: url('https://morgan.dingxians.cn/upload/20241028/671f3e876f863.png');
			background-size: 100% 100%;
			margin: auto;
			box-sizing: border-box;
			padding-top: 68rpx;

			.biaoti_box {
				width: 100%;
				height: 46rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 46rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				position: relative;
				margin-bottom: 20rpx;

				.rightqunauxna_box {
					position: absolute;
					height: 34rpx;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 34rpx;
					font-style: normal;
					text-transform: none;
					right: 46rpx;
					top: 5rpx;
				}
			}

			.zs_con_box {
				width: 100%;
				height: 400rpx;
				overflow: hidden;
				overflow-y: auto;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 50rpx;
				flex-wrap: wrap;

				.big_con_box {
					width: 160rpx;
					margin-bottom: 40rpx;

					.dange_box {
						width: 160rpx;
						height: 221rpx;
						background-size: 100% 100%;
						position: relative;
						margin-bottom: 13rpx;
						box-sizing: border-box;

						.dengji_box {
							font-family: text1;
							font-weight: bold;
							font-size: 24rpx;
							color: #E7CE18;
							position: absolute;
							top: 5rpx;
							left: 18rpx;

							&.dengji_box_1 {
								color: #E7CE18;
							}

							&.dengji_box_2 {
								color: #D876FC;
							}

							&.dengji_box_6 {
								color: #F9B7B1;
							}

							&.dengji_box_8 {
								color: #FEB0D1;
							}
						}

						.dengji_box1 {
							font-family: text1;
							font-weight: bold;
							font-size: 24rpx;
							color: #E7CE18;
							position: absolute;
							top: 5rpx;
							left: 18rpx;

							&.dengji_box1_1 {
								color: #C5F7FD;
							}

							&.dengji_box1_2 {
								color: #EBC5FD;
							}

							&.dengji_box1_3 {
								color: #FDC5EB;
							}

							&.dengji_box1_4 {
								color: #FFEE1F;
							}
						}

						.yuan_box {
							width: 24rpx;
							height: 24rpx;
							position: absolute;
							right: 10rpx;
							top: 20rpx;
							z-index: 2;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.image_box {
							position: absolute;
							max-width: 96rpx;
							height: 140rpx;
							top: 28rpx;
							left: 15rpx;

							image {
								height: 100%;
							}
						}

						.yuansu_box {
							position: absolute;
							width: 100%;
							height: 19rpx;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #FFFFFF;
							text-align: center;
							bottom: 25rpx;
						}
					}

					.name_box {
						width: 100%;
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #FFFFFF;
						overflow: hidden;
						text-align: center;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-bottom: 23rpx;

					}

					.bujinqi_box {
						margin: auto;
						width: 120rpx;
						height: 30rpx;
						bottom: 30rpx;
						right: 30rpx;

						.minus {
							width: 30rpx;
							height: 30rpx;
							background-size: 100% 100%;
						}

						.input {
							padding: 0 10rpx;
							height: 30rpx;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #FFFFFF;
							line-height: 30rpx;
						}

						.plus {
							width: 30rpx;
							height: 30rpx;
							background-size: 100% 100%;
						}
					}

				}
			}
		}

		.zengsongbtn {
			width: 529rpx;
			height: 120rpx;
			background-size: 100% 100%;
			margin: 50rpx auto;
			font-family: text1;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 120rpx;
			text-align: center;
			z-index: 99999;
		}
	}
</style>